import React, { Component } from 'react';
import { MyContent } from '../store'

class Billadd extends Component {
	state = {
		name: '',
		money: '',
		type: '支出',
		tip: '',
		value: '1231231'
	}
	save() {
		this.context.addList({ ...this.state })
	}
	handleChange(value, type) {
		this.setState({
			[type]: value
		})
	}
	render() {
		const { name, money, type, tip, value } = this.state
		console.log(this.context);
		return (
			<div>
				{/* 非受控组件  */}
				<input type="text" defaultValue={ value }/>
				{/* 受控组件： 受 react 状态控制的 表单元素 */}
				{/* 特征： <input value={ 变量 } onChange={ () => {} }/> */}
				<input type="text" placeholder="名称" value={ name } onChange={ (e) => this.handleChange(e.target.value, 'name')  }/>
				<input type="text" placeholder="金额" value={ money } onChange={ (e) => this.handleChange(e.target.value, 'money')  }/>
				<select name="" id="" value={ type } onChange={ (e) => this.handleChange(e.target.value, 'type')  }>
					<option value="收入">收入</option>
					<option value="支出">支出</option>
				</select>
				<textarea name="" id="" cols="30" rows="10" placeholder="备注" value={ tip } onChange={ (e) => this.handleChange(e.target.value, 'tip')  }></textarea>
				<button onClick={() => this.save()}>保存</button>
			</div>
		);
	}

}
// 2. 方式2 第三步  引入context数据
// 挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 
// 创建的 Context 对象。
// 这能让你使用 this.context 来消费最近 Context 上的那个值。
Billadd.contextType = MyContent

export default Billadd;
